import React from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import { Button, Input } from 'antd'
import {SearchOutlined} from '@ant-design/icons'

import { HeaderWrapper } from './style';
import routes from '@/router'

export default function MHeader() {
  const list1 = routes.slice(1, 3).map((item, index) => {
    return <NavLink key={item.name} to={item.path} className='list-item'>{item.name}</NavLink>
  })
  const list2 = routes.slice(3, routes.length).map((item, index) => {
    return <a rel="noreferrer" key={item.name} href={item.path} target="_blank" className='list-item'>{item.name}</a>
  })
  return <HeaderWrapper className={[].join(' ')}>
    <div className='content wrap-w1'>
      <div className='content-left'>
        <h1 className='sprite-01'><a href="/">wangyiyun</a></h1>
        <NavLink to='/discover' className='list-item'>发现音乐</NavLink>
        {list1}
        <Outlet />
        {list2}
      </div>
      <div className='content-right'>
        <Input prefix={<SearchOutlined />} placeholder='音乐/视频/电台/用户'></Input>
        <Button ghost>创作者中心</Button>
      </div>
    </div>
    <div className='line'></div>
  </HeaderWrapper>;
}
